import {Injectable} from '@angular/core';
import {DomSanitizer} from '@angular/platform-browser';

@Injectable({
    providedIn: 'root'
})
export class SignSelectorService {
    lineSigns = [
        {
            key: 'line',
            svg: 'line',
            name: '直线',
            noNeedKey: true // 请求参数中是否使用需要wellKnownName属性, true:没有wellKnownName属性
        },
        {
            svg: 'round',
            name: '公路',
            params: {
                linecap: 'round',
            }
        },
        {
            key: 'shape://vertline',
            svg: 'vertline',
            name: '铁路',
        },
        {
            key: 'dasharray',
            svg: 'dasharray',
            name: '虚线',
            params: {
                dasharray: '5 3',
            },
            noNeedKey: true
        },
        {
            key: 'double-line',
            svg: 'double-line',
            name: '双实线',
            params: {
                perpendicularOffset: '5',
            },
            noNeedKey: true
        },
        {
            key: 'three-line',
            svg: 'three-line',
            name: '三实线',
            params: {
                perpendicularOffset: '5',
                count: '1'
            },
            noNeedKey: true
        },
        {
            key: 'auxiliary-road',
            svg: 'auxiliary-road',
            name: '辅助道路',
            noNeedKey: true
        },
        {
            key: 'river',
            svg: 'river',
            name: '河流',
            noNeedKey: true
        },
        {
            key: 'traffic',
            svg: 'traffic',
            name: '主干道',
            noNeedKey: true
        },
        {
            key: 'boundary-country',
            svg: 'boundary-country',
            name: '国界',
            noNeedKey: true
        },
        {
            key: 'boundary-area',
            svg: 'boundary-area',
            name: '县界',
            noNeedKey: true
        }
    ];
    pointSigns = [
        {
            key: 'circle',
            svg: 'circle',
            name: '圆形',
        },
        {
            key: 'triangle',
            svg: 'triangle',
            name: '三角形',
        },
        {
            key: 'square',
            svg: 'square',
            name: '正方形',
        },
        {
            key: 'pentagon',
            svg: 'pentagon',
            name: '五边形'
        },
        {
            key: 'star',
            svg: 'star',
            name: '五角星'
        },
        {
            key: 'cross',
            svg: 'cross',
            name: '叉号'
        },
        {
            key: 'arrow',
            svg: 'arrow',
            name: '箭头'
        },
        {
            key: 'circle',
            svg: 'circle-black',
            name: '圆形',
        },
        {
            key: 'triangle',
            svg: 'triangle-black',
            name: '三角形',
        },
        {
            key: 'square',
            svg: 'square-black',
            name: '正方形',
        },
        {
            key: 'pentagon',
            svg: 'pentagon-black',
            name: '五边形'
        },
        {
            key: 'star',
            svg: 'star-black',
            name: '五角星'
        },
        {
            key: 'cross',
            svg: 'cross-black',
            name: '叉号'
        },
        {
            key: 'arrow',
            svg: 'arrow-black',
            name: '箭头'
        },
        {
            key: 'circle',
            svg: 'circle-blue',
            name: '圆形',
        },
        {
            key: 'triangle',
            svg: 'triangle-blue',
            name: '三角形',
        },
        {
            key: 'square',
            svg: 'square-blue',
            name: '正方形',
        },
        {
            key: 'pentagon',
            svg: 'pentagon-blue',
            name: '五边形'
        },
        {
            key: 'star',
            svg: 'star-blue',
            name: '五角星'
        },
        {
            key: 'cross',
            svg: 'cross-blue',
            name: '叉号'
        },
        {
            key: 'arrow',
            svg: 'arrow-blue',
            name: '箭头'
        },
        {
            key: 'circle',
            svg: 'circle-yellow',
            name: '圆形',
        },
        {
            key: 'triangle',
            svg: 'triangle-yellow',
            name: '三角形',
        },
        {
            key: 'square',
            svg: 'square-yellow',
            name: '正方形',
        },
        {
            key: 'pentagon',
            svg: 'pentagon-yellow',
            name: '五边形'
        },
        {
            key: 'star',
            svg: 'star-yellow',
            name: '五角星'
        },
        {
            key: 'cross',
            svg: 'cross-yellow',
            name: '叉号'
        },
        {
            key: 'arrow',
            svg: 'arrow-yellow',
            name: '箭头'
        }
    ];
    polygonSigns = [
        {
            key: 'shape://vertline',
            svg: 'vertical',
            name: '竖线'
        },
        {
            key: 'shape://slash',
            svg: 'slash',
            name: '斜线'
        },
        {
            key: 'shape://backslash',
            svg: 'backlash',
            name: '反斜线'
        },
        {
            key: 'shape://plus',
            svg: 'plus',
            name: '十字'
        },
        {
            key: 'shape://times',
            svg: 'cross',
            name: '叉号'
        },
        {
            key: 'yellow-fill',
            svg: 'yellow-fill',
            name: '黄色',
            noNeedKey: true
        },
        {
            key: 'red-fill',
            svg: 'red-fill',
            name: '红色',
            noNeedKey: true
        },
        {
            key: 'blue-fill',
            svg: 'blue-fill',
            name: '蓝色',
            noNeedKey: true
        },
        {
            key: 'blank-fill',
            svg: 'blank-fill',
            name: '空心',
            noNeedKey: true
        },
    ];
    defaultSignSrcMap = {
        point: '/assets/svg-lib/point/circle.svg',
        line: '/assets/svg-lib/line/line.svg',
        polygon: '/assets/svg-lib/polygon/vertical.svg',
    };

    constructor(private sanitizer: DomSanitizer) {
    }

    getDefaultSignInfo(layerType, svgEmbed, signInfo) {
        const svgSrc = this.defaultSignSrcMap[layerType];
        const svgDoc = svgEmbed.getSVGDocument();
        const params = {} as any;
        if (layerType === 'point') {
            params.size = svgDoc.querySelector('svg').getAttribute('width') as any || 1;
            params.color = svgDoc.querySelector('path').getAttribute('fill') || '#000000';
            params.rotation = 0;
            if (!signInfo.noNeedKey) {
                params.wellKnownName = signInfo.key;
            }
        } else if (layerType === 'polygon') {
            const contentPath = svgDoc.querySelector('path.content');
            // params.contentColor = signInfo.key === 'color-fill' ? svgDoc.querySelector('path.outline').getAttribute('fill') : contentPath.getAttribute('stroke');
            params.contentColor = contentPath.getAttribute('stroke');
            params.strokeWidth = svgDoc.querySelector('path.outline').getAttribute('stroke-width');
            params.outLineColor = svgDoc.querySelector('path.outline').getAttribute('stroke');
            params.opacity = svgDoc.querySelector('g').getAttribute('fill-opacity');
            if (!signInfo.noNeedKey) {
                params.wellKnownName = signInfo.key;
            }
        } else if (layerType === 'line') {
            const groupEle = svgDoc.querySelector('g');
            params.color = groupEle.getAttribute('stroke');
            params.width = groupEle.getAttribute('stroke-width');
            if (!signInfo.noNeedKey) {
                params.wellKnownName = signInfo.key;
            }
        }
        return params;
    }

    cleanURL(url) {
        return this.sanitizer.bypassSecurityTrustResourceUrl(url);
    }
}
